<template>
  <div class="container">
    <Breadcrumb :items="['赛事管理', '赛事审核']" />
    <div class="">
      <a-table :data="data">
        <template #columns>
          <a-table-column title="ID" data-index="matchScheduleId"></a-table-column>
          <a-table-column title="赛事名称" data-index="matchTitle"></a-table-column>
          <a-table-column title="赛事类型" data-index="matchType"></a-table-column>
          <a-table-column title="开始时间" data-index="startTime"></a-table-column>
          <a-table-column title="结束时间" data-index="endTime"></a-table-column>
          <a-table-column title="操作" data-index="operation">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" :aa="record" @click="handleGetSubmit(record)">通过</a-button>
                <a-button type="primary" :aa="record" @click="handlePassSubmit(record)">拒绝</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import axios from 'axios';

  export default {
    setup() {
      const data = ref([]);
      const searchField = ref({
        approveStatus:"approve_status"
      })
      const searchValue = ref({
        searchValue: 0
      })
      const reqTableListData = () => {
        data.value  = []
        axios.get(`/match/list?${searchField.value.approveStatus}&${searchValue.value.searchValue}`, {
          params: {
            searchField:searchField.value.approveStatus,
            search:searchValue.value.searchValue
          }
        }).then((res1:any) => {
          console.log(res1);
          res1.records.forEach((item:{ matchType:any; raceMethod:any; approveStatus:any;}) => {
            item.matchType = item.matchType === 1 ? '积分赛' : '常规赛'
            item.raceMethod = item.raceMethod === 1 ? '五次取平均' : '全部取平均'
            item.approveStatus = item.approveStatus === 0 ? '待审核' : '审核通过'
            data.value.push(item);
          })
        })
      }
      onMounted(async()=>{
        await reqTableListData()
      });
      const status  = ref({
        getStatus: 1, // 同意
        passStatus: 0 // 拒绝
      })
      const getMatchId = ref({
        matchScheduleId:''
      })
      const handleGetSubmit = (record:any) => {
        getMatchId.value.matchScheduleId = record.matchScheduleId
        axios.put(`/match/approved/${getMatchId.value.matchScheduleId}/${status.value.getStatus}`).then((res:any) => {
          console.log(res)
          reqTableListData()
        })
      }
      const handlePassSubmit = (record:any) => {
        getMatchId.value.matchScheduleId = record.matchScheduleId
        axios.put(`/match/approved/${getMatchId.value.matchScheduleId}/${status.value.passStatus}`).then((res:any) => {
          console.log(res)
          reqTableListData()
        })
      }
      return {
        data,reqTableListData,searchField,searchValue,
        status,getMatchId,handleGetSubmit,handlePassSubmit
      };
    },
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .header {
    display: flex;
    padding: 20px;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
  }
</style>

<style lang="less" scoped>
  .mobile {
    .content {
      display: block;
      &-left {
        margin-right: 0;
        margin-bottom: 16px;
      }
      &-right {
        width: 100%;
      }
    }
  }
</style>
